<template>
	<view class="content">
        <view class="addPeopleList" @tap="goAddPeople">
		    <img src="https://cdn.yueyangshuyuan.com/%E6%B7%BB%E5%8A%A0%E4%BA%BA%E5%91%98.png" />
			<span>添加出游人</span>
		</view>
		<view class="peopleList clearfix" v-for="(item,index) in peopleList" :key=index >
			<view class="left" @tap.stop="checkPeople(item)">
				<img :src="item.checked?'https://cdn.yueyangshuyuan.com/%E9%80%89%E4%B8%AD.png':'https://cdn.yueyangshuyuan.com/%E6%9C%AA%E9%80%89%E4%B8%AD.png'" />
			</view>
            <view class="right">
				<view class="leftFont" @tap.stop="editPeople(item)">
					 <p class="nameFont">{{item.name}}</p>
					 <view class="phoneFont">
						 <span>手机号</span>
						 <span class="phone">{{item.mobile}}</span>
					 </view>
					 <view class="phoneFont">
						 <span>{{item.status==1?'身份证':item.status==2?'护照':item.status==3?'港澳通行证':item.status==4?'台胞证':item.status==5?'台湾通行证':'回乡证'}}</span>
						 <span class="phone">{{item.cardNo}}</span>
					 </view>
				</view>
				<view class="rightDelect" @tap.stop="delectPeople(item)">
					<img src="https://cdn.yueyangshuyuan.com/%E5%88%A0%E9%99%A4.png" />
				</view>
			</view>

		</view>
		<view class="changeBtn" @tap='setPeopleList' v-if="peopleList.length>0">确定</view>
	</view>
</template>

<script>
import {mapState,mapMutations} from 'vuex';
	export default {
		 ...mapState(['hasLogin', 'isVIP','oderInfo','telPhone','merchInfoForOrder','phoneData',"PeopleCheckList","orderFillInfo"]),
		data() {
			return {
				indexFlag:false,
				tourists:"",
				peopleList:[
				],
				pageNo:1,
				pageSize:1000,
				number:1,
				touristId:""
			}
		},
		created() {
		  this.init();
		},
		show(){
			this.init();
			console.log(this.PeopleCheckList);
		},
		onLoad:function(options){
			// console.log(options.num,898989);
			this.number=options.num;
			if(options.index){  //
                  this.indexFlag=true;
			}
			if(options.tourists&&options.tourists.length>0){
				this.tourists=JSON.parse(options.tourists);
			}
		},
		methods:{
			...mapMutations(['getPhoneType','setOrderFillInfo','setPeopleCheckList']),
            //初始化
			init(){
				
			   //touristMine
			   this.$api.touristMine({
						pageNo:this.pageNo,
						pageSize:this.pageSize
					}).then(json=>{
						for(let i in json.list){
                            json.list[i].checked=false;
						}
						this.peopleList=json.list;

						if(this.tourists!=""){ //存在已选中的
                            for(let i in this.peopleList){
                                 for(let j in this.tourists){
                                      if(this.tourists[j].id==this.peopleList[i].id){
                                           this.peopleList[i].checked=true;
									  }
								 }
							}
						} 
					}) 
			},
			//选中出游人
			checkPeople(item){
				if(!item.checked){
					let index=0;
					for(let i in this.peopleList){
						if(this.peopleList[i].checked){
								index++;
						}
					}
					if(index<this.number){ //可以继续选中
						item.checked=!item.checked;
					}else { //不可以在继续选择
						uni.showToast({
							title: '最多只可选择'+this.number+'名出游人',
							icon:"none",
							duration: 2000
						})
						return false;
					}
				}else {
					item.checked=!item.checked;
				}
			},
			//删除，某个出游人
			delectPeople(item){
			//    this.touristId=item.id;
			   console.log(item.id);
			   let that=this;
               uni.showModal({
					title: '',
					content: '确认要删除此出游人？删除后数据不可恢复',
					success: function (res) {
						if (res.confirm) {
							// console.log('用户点击确定');
							//delectTourist
							that.$api.delectTourist({	

							},item.id).then(json=>{
								uni.showToast({
									title: '删除出游人成功',
									icon:"none",
									duration: 2000
								})
								that.init();
							}) 
						} else if (res.cancel) {
							// console.log('用户点击取消');
						}
					}
				});
			},
			//点击确定按钮
			setPeopleList(){
				let info=[];
				for(let i in this.peopleList){
                    if(this.peopleList[i].checked){
                       info.push(this.peopleList[i]);
					}
				}
				if(info.length==0){
					uni.showToast({
						title: '至少选择一个出游人',
						icon:"none",
						duration: 2000
					})
                   return false;
				}
				this.setPeopleCheckList(info);
				
				if(this.indexFlag){
                    uni.redirectTo({
						url: '/pages/fillOrder/fillOrder'
					});
				}else {
    			    uni.navigateBack();
				}
			},
			//跳转到修改昵称页面
			changeName(){
				uni.redirectTo({
				    url: '/pages/userName/userName'
				});
			},
			editPeople(item){
				 uni.redirectTo({
				    url: '/pages/addPeople/addPeople?id='+item.id+'&num='+this.number+"&tourists="+JSON.stringify(this.tourists)
				});
			},
			goAddPeople(){
                uni.redirectTo({
				    url: '/pages/addPeople/addPeople?id=0&num='+this.number+"&tourists="+JSON.stringify(this.tourists)
				});
			},
		},
	}
	//17321434506
	//500383199209033329
</script>

<style lang="scss">
	.clearfix:after {
		clear: both;
		content: ".";
		display: block;
		font-size: 0;
		height: 0;
		line-height: 0;
		visibility: hidden;
	}
	.clearfix {
		clear: both;
		zoom: 1;
	}
	.content {
		padding:0;
		margin:0;
		background: #f1f5f8;
		padding:25upx;
		box-sizing: border-box;
		padding-bottom: 138upx;
		.addPeopleList {
			display: block;
			background: #fff;
			border-radius: 6upx;
			width:700upx;
			height:96upx;
			padding:23upx 0;
			box-sizing: border-box;
			img {
				float: left;
				margin-left:225upx;
				width:43upx;
				height:41upx;
				margin-top:5upx;
				margin-right:20upx;
			}
			span {
				float: left;
				font-size: 36upx;
                color: #3D84FF;
			}
		}
		.peopleList {
			margin-top:20upx;
			width:700upx;
			height:216upx;
			background: #FFFFFF;
            border-radius: 4px;
			padding:32upx 0;
			box-sizing: border-box;
			.left {
				float: left;
				width:104upx;
				height:100%;
				position: relative;
				padding-right:28upx;
				padding-left:32upx;
				box-sizing: border-box;
				img {
					display: block;
					width:44upx;
					height:44upx;
					position: absolute;
					top:50%;
					margin-top:-22upx;
				}
			}
			.right {
				float: left;
				height: 100%;
				.leftFont {
					float: left;
					width:500upx;
					height: 100%;
					.nameFont {
						width:100%;
						font-size: 36upx;
                        color: #262626;
						margin-bottom: 20upx;
					}
					.phoneFont {
						height:40upx;
						line-height: 40upx;
						font-size: 28upx;
                        color: #777777;
						.phone {
							margin-left:20upx;
						}
					}
				}
				.rightDelect {
					float: left;
					width:96upx;
					height: 100%;
					position: relative;
					img {
						display: block;
						width:44upx;
						height:44upx;
						position: absolute;
						top:50%;
						margin-top:-22upx;
					}
				}
			}
		}
	}
	.changeBtn {
		width:100%;
		height:108upx;
		background: #E25422;
        box-shadow: 0 -10px 16px 0 rgba(164,164,164,0.20);
		font-size: 32upx;
		color: #FFFFFF;
		letter-spacing: 0;
		text-align: center;
		line-height: 108upx;
		position: fixed;
		left:0;
		bottom: 0;
		z-index: 9;
	}
	body {
		background: #f1f5f8;
	}

</style>
